<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 800px;
            margin: 20px auto;
    }
    h2{
        text-align: center;
    }
    .tabs {
        display: flex;
        margin-bottom: 20px;
        }
    .tab{
        cursor: pointer; 
        margin-right: 20px; 
        border: Ipx solid; 
        width: 80px;
        height:40px; 
        line-height:40px;
        text-align: center;
         font-size:20px;
    }
    focus {
        background:rgb(162,131.116);
        color:#fff;
    }
    .book {
        display:flex;
        flex-direction: column;
        align-items: center;
        width:160px;
    }
    .book-name {
        margin-top: 10px;
        height:42px;
    }
    .book-price {
        color: red;
    }
        .books {
            display: flex;
            justify-content: space-between;
            }
            </style>
            <script src="vue.js"></script>
        </head>
        <body>
            <div id="app">
                <h2>每日精选</h2>
                <div class="tabs">
                    <div class="tab focus" @mouseenter="changeBooks('hot',Sevent)">热销
</div>
                <div class="1ab" @mouseenter="changeBooks('tec',Sevent)">科技</div>
            </div>
            <book-list :list="list"></book-list>
        </div>
    </body>
    <script type="text/x-template" id="book">
        <div class="book">
            <img class="book-pic" :src="book.pic" width="160">
            <div class="book-name"> {{book.name}}</div>
            <div class="book-price"> ￥{{book price}}</div>
        </div>
    </script>
    <script type="text/x-template" id="book-list">
        <div class="books">
            <book v-for="item in list" :book-"item"></book>
        </div>
    </script>
    <script>
        Vue.component('book', {
            template: '#book',
            props: ['book']
        })
        Vue.component('book-list', {
            template: '#book-list', 
            props: ['list']
        })
        let vm = new Vue({ 
            el: '#app',
            data: {
                books: {
                    hot: [{
                        name:'周大新:安魂',
                        price: '26.90',
                        pic: 'ah.Webp'
                    },{
                        name:'开端',
                        price:'49.80',
                        pic:'kd.Webp'
                    },{
                        name:'长岛小记',
                        price:'33.80',
                        pic:'cdj.Webp'
                    },{
                        name:'沙丘全套 六部曲',
                        price:'394.90',
                        pic:'sq.Webp'
                    }],
                    tec:[{
                        name:'℃ Primer Plus',
                        price:'76.20',
                        pic:'e.Webp'
                    },{
                        name: 'Linux 就该这么学',
                        price: '94.60',
                        pic: 'Tinux.Webp'
                    },{
                        name:'关于火星的一切',
                        price: '39.40',
                        pic: 'linux.Webp'
                    },{
                        name:'植物的战斗',
                        price: '49.00',
                        pic: 'zw.Webp'
                    }]
                },
                    list: []
                },
                methods: {
                    changeBooks: function(type, event) { 
                        this.list = this.books[type]
                        let tabs = document.querySelectorAll('.tab')
                        for (let i = 0; i < tabs.length; i++) {
                            tabs[i].classList.remove('focus')
                        }
                        let tab = event.target
                        tab.classList.add('focus')
                    }
                },
                mounted() {
                    this.list = this. books['hot']
                }
            })
        </script>
        </html>
